<template>
  <div class="shareContainer" ref="shareContainer">
    <el-drawer
      @open="openDrawerEvent"
      title="编辑货物托运单"
      :visible.sync="editflagShowData"
      :direction="direction"
      :before-close="handleClose"
      :wrapperClosable="false"
      size="80%"
    >
      <div class="waybill_content">
        <!-- 运单号 ========================================== -->
        <div class="waybill_title">
          <div class="waybill_left">
            <span>运单号：</span>
            <!-- <span>
              <input
                id="createOrder"
                class="order-number-input"
                type="text"
                name=""
                v-model="formData.waybill_code"
              />
            </span> -->
            <el-input
              v-model="formData.waybill_code"
              maxlength="20"
              placeholder="默认自动生成"
              style="width: 230px"
            ></el-input>
          </div>
          <div class="waybill_time">
            <span>开单时间：</span>
            <span>{{
              new Date(formData.createTime * 1000).toLocaleString()
            }}</span>
          </div>
        </div>
        <!-- 内容 ====================== -->
        <div class="article">
          <!-- 发货网点 ===================== -->
          <div class="waybill_top">
            <div class="waybill_item warbill_c" style="position: relative">
              <span class="order-number-name">出发网点：</span>
              <el-cascader
                @change="selectedWebsite"
                style="width: 220px"
                v-model="formData.departure_id"
                :options="waybillData"
                :props="propsBranchType"
                :show-all-levels="false"
                clearable
                filterable
                disabled
              >
              </el-cascader>
              <el-tooltip
                class="item"
                effect="dark"
                content="出发网点、目的网点根据发货城市、收货城市自动匹配，如需修改请修改组织架构-组织-分管城市"
                placement="bottom"
              >
                <i
                  style="
                    position: absolute;
                    color: darkorange;
                    font-size: 18px;
                    margin-top: 18px;
                    margin-left: 2px;
                  "
                  class="el-icon-info"
                ></i>
              </el-tooltip>
            </div>
            <div class="waybill_item warbill_f">
              <span style="color: white">* </span>
              <span class="order-number-name">发站：</span>
              <el-input
                v-model="formData.departure_station_name"
                style="width: 220px"
              ></el-input>
            </div>
            <div class="waybill_item warbill_d">
              <span style="color: white">* </span>
              <span class="order-number-name">到站：</span>
              <el-input
                v-model="formData.at_station_name"
                style="width: 220px"
              ></el-input>
            </div>
            <div class="waybill_item warbill_m" style="position: relative">
              <span class="order-number-name">目的网点：</span>
              <el-cascader
                style="width: 220px"
                @change="selectedWebsite2"
                v-model="formData.destination_network_id"
                :options="waybillData"
                :props="propsBranchType"
                :show-all-levels="false"
                clearable
                filterable
                disabled
              >
              </el-cascader>
              <el-tooltip
                class="item"
                effect="dark"
                content="出发网点、目的网点根据发货城市、收货城市自动匹配，如需修改请修改组织架构-组织-分管城市"
                placement="bottom"
              >
                <i
                  style="
                    position: absolute;
                    color: darkorange;
                    font-size: 18px;
                    margin-top: 18px;
                    margin-left: 2px;
                  "
                  class="el-icon-info"
                ></i>
              </el-tooltip>
            </div>
            <div class="waybill_item warbill_l">
              <span style="color: white">* </span>
              <span class="order-number-name">路由：</span>
              <el-select
                style="width: 220px"
                allow-create
                filterable
                remote
                reserve-keyword
                :remote-method="searchRouterList"
                v-model="formData.router_id"
                @change="selectedRouter"
              >
                <el-option
                  v-for="item in routerList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="waybill_item warbill_w">
              <span style="color: red">*</span>
              <span
                class="order-number-name"
                style="width: 78px; dispaly: inline-block"
                >承运类型：</span
              >
              <el-select
                style="width: 220px"
                v-model="formData.waybill_product_type"
                @change="selectTransportsType"
              >
                <el-option
                  v-for="type in transportsType"
                  :key="type.id"
                  :label="type.name"
                  :value="type.id"
                />
              </el-select>
            </div>
            <div
              class="waybill_item warbill_w"
              v-if="is_incubator !== '1'"
              style="padding-left: 24px; width: 342px"
            >
              <span
                style="color: red; margin-right: -20px"
                v-if="is_incubator !== '0'"
                >*</span
              >
              <span class="order-number-name">温层：</span>
              <el-select
                v-model="formData.Thermosphere"
                :disabled="is_incubator === '0'"
                style="width: 220px"
              >
                <el-option
                  v-for="temp in ThermosphereType"
                  :key="temp.item_code"
                  :label="temp.item_name"
                  :value="temp.item_code"
                />
              </el-select>
            </div>
            <div class="waybill_item warbill_w">
              <span style="color: white">* </span>
              <span class="order-number-name">预计时效：</span>
              <el-input
                v-model="formData.transport_days"
                placeholder=""
                style="width: 185px; margin-right: 5px"
              ></el-input
              >小时
            </div>
            <div class="waybill_item warbill_s">
              <span style="color: red">* </span>
              <span class="order-number-name">送货方式：</span>
              <el-select
                style="width: 220px"
                v-model="formData.Delivery_method"
              >
                <el-option
                  v-for="type in deliveryMethodsList"
                  :key="type.item_code"
                  :label="type.item_name"
                  :value="type.item_code"
                />
              </el-select>
            </div>
            <div class="waybill_item warbill_l">
              <span style="color: red">* </span>
              <span class="order-number-name">所属客户：</span>
              <el-select
                :disabled="type == 1"
                style="width: 220px"
                filterable
                remote
                reserve-keyword
                :remote-method="searchCustomerList"
                v-model="formData.customer_id"
                @change="selectedCustomer"
              >
                <el-option
                  v-for="item in customerList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="waybill_item warbill_s" style="width: 343px">
              <span style="color: red">* </span>
              <span class="order-number-name">是否投保：</span>
              <el-switch
                v-model="formData.insure_value"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </div>
            <div class="waybill_item warbill_d">
              <span style="color: white"></span>
              <span class="order-number-name">提货时间：</span>
              <el-date-picker
                v-model="formData.pickerTime_val"
                type="datetime"
                value-format="timestamp"
                placeholder="选择日期时间"
                default-time="12:00:00"
                :default-value="new Date()"
              >
              </el-date-picker>
            </div>
          </div>
          <!-- 发货方 ============================================== -->
          <div class="waybill_mid">
            <!-- 发货人 -->
            <div class="waybill_mid_left">
              <div class="left_title_l">
                <span class="icon"><i class="el-icon-s-custom"></i></span>
                <span>发货方</span>
              </div>
              <div class="left_title_r">
                <div class="left_title_shipper">
                  <span style="color: red">* </span>
                  <span>发货人：</span>
                  <el-select
                    style="width: 320px"
                    filterable
                    remote
                    reserve-keyword
                    default-first-option
                    :remote-method="searchShipperList"
                    v-model.trim="formData.sender.name"
                    @change="selectedConsignor"
                    @blur.native.capture="saveSenderName($event)"
                  >
                    <el-option
                      v-for="item in shipperList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="left_title_shipper">
                  <span style="color: red">* </span>
                  <span>手机号码：</span>
                  <el-input
                    style="width: 308px"
                    v-model.trim="formData.sender.phone"
                  ></el-input>
                </div>
                <div class="left_title_shipper">
                  <span style="color: red">* </span>
                  <span>发货公司：</span>
                  <el-input
                    style="width: 308px"
                    v-model="formData.sender.company"
                    placeholder=""
                  ></el-input>
                </div>
                <div class="left_title_shipper">
                  <span style="color: red">* </span>
                  <span>详细地址：</span>
                  <el-input
                    style="width: 308px"
                    v-model="formData.sender.address"
                    placeholder="请输入详细地址"
                    @blur="detailSendAddress(formData.sender.address)"
                  ></el-input>
                </div>
                <div class="left_title_shipper">
                  <span style="color: red; margin-right: 10px"></span>
                  <span>发货地址：</span>
                  <el-cascader
                    style="width: 308px"
                    clearable
                    filterable
                    @clear="
                      formData.sender_pcd = [];
                      formData.sender.province_name = '';
                      formData.sender.city_name = '';
                      formData.sender.district_name = '';
                    "
                    @change="changeSenderAddress"
                    :options="addresssequence"
                    v-model="formData.sender_pcd"
                    placeholder="请选择省市区"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'next_level_data',
                    }"
                  ></el-cascader>
                </div>
              </div>
            </div>
            <!-- 收货人 -->
            <div class="waybill_mid_right">
              <div class="right_title_l">
                <span class="icon"><i class="el-icon-user-solid"></i></span>
                <span>收货方</span>
              </div>
              <div class="right_title_r">
                <div class="left_title_shipper">
                  <span style="color: red">* </span>
                  <span>收货人：</span>
                  <el-select
                    style="width: 320px"
                    filterable
                    remote
                    reserve-keyword
                    default-first-option
                    :remote-method="searchConsigneeList"
                    v-model.trim="formData.receiver.name"
                    @change="selectedConsignee"
                    @blur.native.capture="saveReceiverName($event)"
                  >
                    <el-option
                      v-for="item in consigneeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="left_title_shipper">
                  <span style="color: red">* </span>
                  <span>手机号码：</span>
                  <el-input
                    style="width: 308px"
                    v-model.trim="formData.receiver.phone"
                  ></el-input>
                </div>
                <div class="left_title_shipper">
                  <span style="color: red">* </span>
                  <span>收货公司：</span>
                  <el-input
                    style="width: 308px"
                    v-model="formData.receiver.company"
                    placeholder=""
                  ></el-input>
                </div>
                <div class="left_title_shipper">
                  <span style="color: red">* </span>
                  <span>详细地址：</span>
                  <el-input
                    style="width: 308px"
                    v-model="formData.receiver.address"
                    placeholder="请输入详细地址"
                    @blur="DetailReceiverAddress(formData.receiver.address)"
                  ></el-input>
                </div>
                <div class="left_title_shipper">
                  <span style="color: red; margin-right: 10px"></span>
                  <span>收货地址：</span>
                  <el-cascader
                    style="width: 308px"
                    clearable
                    filterable
                    @clear="
                      formData.receiver_pcd = [];
                      formData.receiver.province_name = '';
                      formData.receiver.city_name = '';
                      formData.receiver.district_name = '';
                    "
                    @change="changeReceiverAddress"
                    :options="addresssequence"
                    v-model="formData.receiver_pcd"
                    placeholder="请选择省市区"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'next_level_data',
                    }"
                  ></el-cascader>
                </div>
              </div>
            </div>
          </div>
          <!-- 货物信息  -->
          <div class="order-information">
            <div class="total_left_title">
              <span><i></i><b>货物信息：</b></span>
            </div>
            <div class="order-shiper-img">
              <span>随货同行单:</span>
              <div style="display: inline-block; margin-left: 20px">
                <el-upload
                  action
                  :auto-upload="false"
                  list-type="picture-card"
                  :before-remove="beforeRemove"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-change="handleChange"
                  :file-list="fileList"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>
            <div class="order-shiper-warp">
              <el-table
                ref="singleTable"
                :data="goodsArray"
                highlight-current-row
                style="width: 100%"
                border
              >
                <el-table-column width="50" key="0">
                  <template slot="header" slot-scope="scope">
                    <span @click="addShiper(scope)" style="font-size: 20px"
                      >+</span
                    >
                  </template>
                  <template slot-scope="scope">
                    <div class="remodername">
                      <div class="number">{{ scope.$index + 1 }}</div>
                      <div
                        class="remodercenter el-icon-minus"
                        @click="reduce(scope.$index)"
                      ></div>
                    </div>
                  </template>
                </el-table-column>
                <!-- 需要投保的时候货物名称是必填项 -->
                <el-table-column
                  property="name"
                  label="货物名称"
                  width="80"
                  key="1"
                  v-if="formData.insure_value === '1'"
                >
                  <template slot="header">
                    <span style="color: red">*货物名称</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="name"
                  label="货物名称"
                  width="180"
                  key="12"
                  v-else
                >
                  <template slot="header">
                    <span>货物名称</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="goods_no"
                  label="方案编码"
                  width="180"
                  v-if="is_incubator === '1'"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.goods_no"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="number"
                  label="件数"
                  prop="number"
                  width="100"
                  key="2"
                >
                  <template slot="header">
                    <span>件数</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input
                      v-model.number="scope.row.number"
                      @change="accopNumber(2, scope)"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="thermosphere"
                  label="温层"
                  width="180"
                  key="10"
                  v-if="is_incubator === '1'"
                >
                  <template slot="header">
                    <span style="color: red">*温层</span>
                  </template>
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.thermosphere"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in ThermosphereType"
                        :key="item.item_code"
                        :label="item.item_name"
                        :value="item.item_code"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  property="frozen_box_number"
                  label="冻存盒数量"
                  width="100"
                  key="11"
                  v-if="is_incubator === '1'"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model.number="scope.row.frozen_box_number"
                    ></el-input>
                  </template>
                </el-table-column>

                <el-table-column
                  property="packing"
                  label="货物包装"
                  width="120"
                  key="3"
                  v-if="is_incubator !== '1'"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.packing"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option label="纸箱" value="0"> </el-option>
                      <el-option label="木箱" value="1"> </el-option>
                      <el-option label="纤袋" value="2"> </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  property="packing"
                  label="包装型号"
                  width="180"
                  key="9"
                  v-if="is_incubator === '1'"
                >
                  <template slot="header">
                    <span>包装型号</span>
                  </template>
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.package_type"
                      clearable
                      placeholder="请选择"
                      @change="accopNumber(2, scope)"
                    >
                      <el-option
                        v-for="item in package_typeList"
                        :key="item.item_code"
                        :label="item.item_name"
                        :value="item.item_code"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  property="package_quantity"
                  label="包装数量"
                  width="100"
                  key="13"
                >
                  <template slot="header">
                    <span>包装数量</span>
                  </template>
                  <template slot-scope="scope">
                    <el-input
                      v-model.number="scope.row.package_quantity"
                      @change="accopNumber(2, scope)"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="weight"
                  label="重量(kg)"
                  width="100"
                  key="4"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.weight"
                      @change="accopNumber(2, scope)"
                      @input="
                        controlInputNumber(
                          scope.row.weight,
                          3,
                          'goodsArray',
                          scope.$index,
                          'weight'
                        )
                      "
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="volume"
                  label="体积(m³)"
                  width="100"
                  key="5"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.volume"
                      @change="accopNumber(2, scope)"
                      @input="
                        controlInputNumber(
                          scope.row.volume,
                          3,
                          'goodsArray',
                          scope.$index,
                          'volume'
                        )
                      "
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="rule_cost_info"
                  label="计费规则"
                  width="180"
                  key="14"
                >
                  <template slot="header">
                    <span>计费规则</span>
                  </template>
                  <template slot-scope="scope">
                    <el-select
                      v-model="goodsArray[scope.$index].rule_cost_info_id"
                      clearable
                      placeholder="请选择"
                      @change="
                        rulechange(
                          scope,
                          scope.row.rule_cost_info,
                          scope.row.rule_cost_info_id
                        )
                      "
                    >
                      <el-option
                        v-for="item in goodsArray[scope.$index].rule_cost_info"
                        :key="item.rule_id"
                        :label="item.rule_name"
                        :value="item.rule_id"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  property="price"
                  label="价格(元)"
                  width="100"
                  key="6"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.price"
                      @input="
                        controlInputNumber(
                          scope.row.price,
                          2,
                          'goodsArray',
                          scope.$index,
                          'price'
                        )
                      "
                      @change="AllShowprice()"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="declared_value"
                  label="价值(元)"
                  width="100"
                  key="7"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.declared_value"
                      @input="
                        controlInputNumber(
                          scope.row.declared_value,
                          2,
                          'goodsArray',
                          scope.$index,
                          'declared_value'
                        )
                      "
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="waybill_total">
            <div class="total_left">
              <div class="total_left_title">
                <span><i></i><b>合计运费：</b></span>
                <i>{{ totalFreight }}</i>
              </div>
              <div class="total_left_content_s">
                <div
                  class="total_left_content"
                  v-for="item in costList"
                  :key="item.item_code"
                >
                  <div>
                    <span class="order-number-name"
                      >{{ item.item_name }}：</span
                    >
                    <el-input
                      style="width: 180px"
                      v-model="formData.expense[item.item_code]"
                      placeholder=""
                      @input="
                        controlInputNumber(
                          formData.expense[item.item_code],
                          2,
                          'formData',
                          'expense',
                          `${item.item_code}`
                        )
                      "
                    ></el-input>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 付款方式=============== -->
          <div class="payment_method_class">
            <div class="total_mid">
              <div class="total_left_title">
                <span><i></i><b>付款方式</b></span>
              </div>
              <div class="total_left_content">
                <div class="four_w four_w_select">
                  <span style="color: red">* </span>
                  <span class="order-number-name">付款方式：</span>
                  <el-select
                    v-model="formData.fkfshi"
                    style="width: 100px"
                    @change="autoUpdateFee"
                  >
                    <el-option
                      v-for="pay in payMethods"
                      :key="pay.item_code"
                      :label="pay.item_name"
                      :value="pay.item_code"
                    />
                  </el-select>
                </div>
                <div
                  class="four_w four_w_select"
                  v-for="item in payMethods"
                  :key="item.item_code"
                >
                  <span class="order-number-name">{{ item.item_name }}：</span>
                  <el-input
                    style="width: 180px"
                    :disabled="formData.fkfshi === '0' ? false : true"
                    v-model="formData.payment[item.item_code]"
                    placeholder=""
                  ></el-input>
                </div>
              </div>
            </div>
            <!-- <div class="total_right">
              <div class="total_left_title">
                <span><i></i><b>代收款</b></span>
              </div>
              <div class="total_right_content">
                <div class="total_rigth_content_r">
                  <span class="order-number-name">代收货款：</span>
                  <el-input
                    style="width: 150px"
                    v-model="formData.payment_goods"
                    placeholder=""
                  ></el-input>
                </div>
                <div class="total_rigth_content_r">
                  <span class="order-number-name">手续费：</span>
                  <el-input
                    style="width: 165px"
                    v-model="formData.Service_Charge"
                    placeholder=""
                  ></el-input>
                </div>
              </div>
            </div> -->
          </div>
          <!-- 经办人 ======================== -->
          <div class="waybill_message">
            <div class="waybill_item">
              <div class="waybill">
                <span style="color: red">* </span>
                <span class="order-number-name">经办人：</span>
                <el-select
                  style="width: 130px"
                  @change="selectHandler"
                  v-model="formData.Handler"
                  :disabled="formData.handler_name ? true : false"
                >
                  <el-option
                    v-for="person in Handlers"
                    :key="person.id"
                    :label="person.nickname"
                    :value="person.id"
                  />
                </el-select>
              </div>
            </div>
            <!-- <div class="waybill_item" style="width: 200px">
              <el-checkbox
                label="控货"
                v-model="formData.konghuo"
              ></el-checkbox>
              <el-checkbox label="提货" v-model="formData.tihuo"></el-checkbox>
            </div> -->
            <div class="waybill_item" style="width: 360px">
              <span class="order-number-name">回单：</span>
              <el-checkbox
                label="客户回单"
                v-model="is_receipt_customer"
              ></el-checkbox>
              <el-checkbox
                label="我司回单"
                v-model="is_receipt_ds"
              ></el-checkbox>
            </div>
            <div class="waybill_item waybill_item_yuns">
              <span class="order-number-name">运输方式：</span>
              <el-select v-model="formData.type_shipping">
                <el-option
                  v-for="pay in transportsWayList"
                  :key="pay.item_code"
                  :label="pay.item_name"
                  :value="pay.item_code"
                />
              </el-select>
            </div>
            <div class="waybill_item warbill_f">
              <div class="warbill_f_r">
                <span class="order-number-name">备注：</span>
                <el-input
                  style="width: 150px"
                  v-model="formData.remarks"
                  placeholder=""
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div style="margin: 0 auto">
          <el-button
            id="orderSave"
            @click="openFullScreen1"
            v-loading.fullscreen.lock="fullscreenLoading"
            data-tracker="P3-31"
            v-preventReClick
            >保存</el-button
          >
          <el-button id="orderCancel" data-tracker="P3-32" @click="orderclose"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  WaybillEditFn,
  dictionaryBatch,
  getTransportsList,
  reqHandlersList,
  getConsignorList,
  ConsigneeInterface,
  reqWebsiteList,
  regionbox,
  getRouterList,
  recognitionListcity,
  accountingrules, //计费规则接口
} from "@/api/waybill";
import { organizationBox } from "@/api/organization";
import { customerPeople } from "@/api/information";
import {
  timestamp10,
  filterTwoNumber,
  filterThreeNumber,
} from "@/utils/mUtils";
import { setToken, getToken } from "@/utils/auth";
import { uploading, regionList } from "@/page/material/common/common";
export default {
  name: "Editwaybill",
  props: ["editflagShowData", "selectedDetail", "getWaybillListDataFn"],
  data() {
    return {
      cascaderVisible: true,
      fullscreenLoading: false, //loading遮罩层
      addresssequence: [], //地址库
      direction: "rtl",
      options: [],
      // options2: [],
      ThermosphereType: [], //温层的类型
      payMethods: [], //支付方式的类型
      transportsType: [], //承运产品类型
      Handlers: [], //经办人
      shipperList: [], //发货人
      consigneeList: [], //收货人
      websiteList: [], //网点
      areaType: [], //大区类型
      routerList: [], //路由
      customerList: [], //客户列表
      costList: [], //费用
      deliveryMethodsList: [], //送货方式
      transportsWayList: [], //运输方式
      package_typeList: [], //保温箱型号
      is_incubator: "", //是否是保温箱
      is_receipt_customer: true,
      is_receipt_ds: true,
      fileList: [], //上传的文件
      dialogImageUrl: "",
      dialogVisible: false,
      formData: {
        images: [],
        token: "",
        waybill_code: "", //运单号 waybill_number
        transport_type: "", //承运类型 transport_type
        departure: "", //出发网点 from_network
        departure_id: [], //出发网点的id
        departure_station: "", //发站 from_region_id
        departure_station_name: "", //发站 from_region
        at_station: "", //到站 to_region_id
        at_station_name: "", //到站 to_region
        destination_network: "", //目的网点 to_network
        destination_network_id: [], //目的网点的id
        router_id: "", //路由的id
        router: "", //路由 router
        customer_id: "", //所属客户的id
        customer: "", //所属客户 customer
        waybill_product_type: "", //产品类型 waybill_product_type
        Thermosphere: "", //温层 thermosphere
        ThermosphereName: "",
        area_type: "", //区域 area_type
        Delivery_method: "", // 送货方式 delivery_method
        insure_value: "0", //投保
        sender_pcd: [], //省市区的id
        sender: {
          id: "", //发货人的id
          name: "", //发货人 sender.name
          company: "", //单位
          company_id: "", //单位id
          phone: "", //发货人手机号 sender.phone
          province_id: "",
          city_id: "",
          district_id: "",
          address: "", //发货地址 sender.address
        },
        receiver_pcd: [], //省市区的id
        receiver: {
          id: "",
          name: "",
          company: "",
          company_id: "",
          phone: "",
          province_id: "",
          city_id: "",
          district_id: "",
          address: "",
        },
        expense: {}, //费用
        payment: {},
        fkfshi: "4", //付款方式 payment.payment_method
        Service_Charge: "",
        payment_goods: "",
        Handler: "", //经办人 handler_id
        handler_name: "",
        konghuo: "", //控货 goods_action
        tihuo: "", //提货 pick_up_goods

        type_shipping: "0", //运输方式 transport_way
        transport_days: "", //预计时效 aging
        remarks: "", //备注
        createTime: "",
        pickerTime_val: "", //提货时间
      },
      goodsArray: [
        {
          name: "",
          packing: "", //包装
          package_quantity: "1", //包装数量
          goods_no: "", //编号
          number: "", //件数
          weight: "", //重量
          volume: "", //体积
          price: "", //价格
          declared_value: "", //价值
          thermosphere: "", //温层
          package_type: "", //保温箱型号
          frozen_box_number: "", //冻存盒数量
        },
      ],
      type: "", // 是否是客户类型
      type_id: "", //客户id
      propsBranchType: {
        emitPath: true,
        checkStrictly: true,
        value: "id",
        label: "branch_name",
        children: "next_level_data",
      },
      waybillData: [],
    };
  },
  computed: {
    totalFreight() {
      let num = 0;
      for (var item in this.formData.expense) {
        if (
          item != 2 &&
          item != 3 &&
          item != 7 &&
          item != 12 &&
          item !== "total_freight"
        ) {
          num += this.formData.expense[item] * 1;
        }
      }
      return num.toFixed(2);
    },
  },
  watch: {
    totalFreight: {
      deep: true,
      handler() {
        let num = 0;
        for (var item in this.formData.expense) {
          if (
            item != 2 &&
            item != 3 &&
            item != 7 &&
            item != 12 &&
            item !== "total_freight"
          ) {
            num += this.formData.expense[item] * 1;
          }
        }
        this.autoUpdateFee(this.formData.fkfshi);
        return num;
      },
    },
    // 监听承运类型用来匹配计费规则
    "formData.waybill_product_type": "watchwaybill",
    // 监听所属客户用来匹配计费规则
    "formData.customer_id": "watchcustomer",
    //  监听发货地址
    "formData.sender_pcd": {
      handler(newval, oldval) {
        this.pageaccountingrules(1, "val");
      },
      deep: true,
    },
    "formData.receiver_pcd": {
      handler(newval, oldval) {
        this.pageaccountingrules(1, "val");
      },
      deep: true,
    },
    async selectedDetail() {
      if (this.selectedDetail.images !== null) {
        this.formData.images = this.selectedDetail.images;
        this.fileList = this.selectedDetail.images.map((url) => {
          return url;
        });
      } else {
        this.fileList = [];
        this.formData.images = [];
      }
      this.formData.waybill_code = this.selectedDetail.waybill_number;
      this.formData.createTime = this.selectedDetail.create_time;
      this.formData.pickerTime_val =
        this.selectedDetail.collect_time.start_time === "0"
          ? ""
          : this.selectedDetail.collect_time.start_time * 1000; //提货时间
      this.formData.area_type = this.selectedDetail.area_type;
      this.formData.departure_station_name = this.selectedDetail.from_region;
      this.formData.at_station_name = this.selectedDetail.to_region;
      this.formData.departure = this.selectedDetail.from_network_name;
      this.formData.destination_network = this.selectedDetail.to_network_name;
      this.formData.departure_id =
        this.selectedDetail.from_network_id == "0"
          ? ""
          : this.selectedDetail.from_network_id * 1;
      this.formData.destination_network_id =
        this.selectedDetail.to_network_id == "0"
          ? ""
          : this.selectedDetail.to_network_id * 1;
      setTimeout(() => {
        if (this.selectedDetail.from_network_id !== "0") {
          this.selectedWebsite(this.selectedDetail.from_network_id);
        }
        if (this.selectedDetail.to_network_id !== "0") {
          this.selectedWebsite2(this.selectedDetail.to_network_id);
        }
      }, 500);
      this.searchRouterList(this.selectedDetail.router_id);
      this.formData.router_id =
        this.selectedDetail.router_id == 0
          ? ""
          : this.selectedDetail.router_id * 1;
      this.formData.router = this.selectedDetail.router;
      if (
        this.selectedDetail.customer_id &&
        this.selectedDetail.customer_id !== "0"
      ) {
        let result = await customerPeople({
          name: "", // 名称
          id: String(this.selectedDetail.customer_id),
          is_send: "1",
          is_receive: "",
        });
        this.customerList = result.data;
        this.formData.customer_id = this.selectedDetail.customer_id * 1;
      } else {
        this.formData.customer_id = "";
      }
      setTimeout(() => {
        this.formData.waybill_product_type =
          this.selectedDetail.waybill_product_type == "0"
            ? ""
            : this.selectedDetail.waybill_product_type;
        this.selectTransportsType(this.formData.waybill_product_type);
        let piece = this.transportsType.find(
          (item) => item.id == this.formData.Thermosphere
        );
        if (piece) {
          this.ThermosphereName = piece.name;
        }
        this.formData.Thermosphere = this.selectedDetail.thermosphere;
      }, 1000);
      this.formData.insure_value = this.selectedDetail.insure_value;
      this.formData.Delivery_method = this.selectedDetail.delivery_method;
      if (this.selectedDetail.handler_id === "0") {
        this.getHandlersList();
      }
      if (this.selectedDetail.goods_action === "3") {
        this.formData.konghuo = true;
        this.formData.tihuo = true;
      } else if (this.selectedDetail.goods_action === "2") {
        this.formData.tihuo = true;
        this.formData.konghuo = false;
      } else if (this.selectedDetail.goods_action === "1") {
        this.formData.konghuo = true;
        this.formData.tihuo = false;
      } else {
        this.formData.konghuo = false;
        this.formData.tihuo = false;
      }
      if (this.selectedDetail.sender.district_id == 0) {
        if (this.selectedDetail.sender.city_id == 0) {
          this.formData.sender_pcd = [
            this.selectedDetail.sender.province_id * 1,
          ];
        } else {
          this.formData.sender_pcd = [
            this.selectedDetail.sender.province_id * 1,
            this.selectedDetail.sender.city_id * 1,
          ];
        }
      } else if (
        this.selectedDetail.sender.city_id != 0 &&
        this.selectedDetail.sender.district_id != 0
      ) {
        this.formData.sender_pcd = [
          this.selectedDetail.sender.province_id * 1,
          this.selectedDetail.sender.city_id * 1,
          this.selectedDetail.sender.district_id * 1,
        ];
      }
      if (this.selectedDetail.receiver.district_id == 0) {
        if (this.selectedDetail.receiver.city_id == 0) {
          this.formData.receiver_pcd = [
            this.selectedDetail.receiver.province_id * 1,
          ];
        } else {
          this.formData.receiver_pcd = [
            this.selectedDetail.receiver.province_id * 1,
            this.selectedDetail.receiver.city_id * 1,
          ];
        }
      } else if (
        this.selectedDetail.receiver.city_id != 0 &&
        this.selectedDetail.receiver.district_id != 0
      ) {
        this.formData.receiver_pcd = [
          this.selectedDetail.receiver.province_id * 1,
          this.selectedDetail.receiver.city_id * 1,
          this.selectedDetail.receiver.district_id * 1,
        ];
      }
      setTimeout(() => {
        if (this.formData.sender_pcd[0] && this.formData.sender_pcd[1]) {
          this.formData.departure_station_name = this.addresssequence
            .find((item) => item.id === this.formData.sender_pcd[0])
            .next_level_data.find(
              (item) => item.id === this.formData.sender_pcd[1]
            ).name;
        }
        if (this.formData.receiver_pcd[0] && this.formData.receiver_pcd[1]) {
          this.formData.at_station_name = this.addresssequence
            .find((item) => item.id === this.formData.receiver_pcd[0])
            .next_level_data.find(
              (item) => item.id === this.formData.receiver_pcd[1]
            ).name;
        }
      }, 1000);
      this.cascaderVisible = true;
      this.formData.sender = this.selectedDetail.sender;
      this.searchShipperList(this.selectedDetail.sender.name);
      this.formData.receiver = this.selectedDetail.receiver;
      this.searchConsigneeList(this.selectedDetail.receiver.name);
      this.goodsArray = this.selectedDetail.goods.map((item) => {
        item.weight = item.weight + "";
        item.volume = item.volume + "";
        item.price = item.price + "";
        item.declared_value = item.declared_value + "";
        item.thermosphere = item.thermosphere;
        item.package_type = item.package_type !== "0" ? item.package_type : "";
        return item;
      });
      for (var item in this.selectedDetail.expense) {
        this.selectedDetail.expense[item] =
          this.selectedDetail.expense[item] / 1;
      }
      this.formData.expense = this.selectedDetail.expense;
      if (this.selectedDetail.payment.payment_method !== "0") {
        this.formData.fkfshi = this.selectedDetail.payment.payment_method;
      }
      for (var item in this.selectedDetail.payment) {
        this.selectedDetail.payment[item] =
          this.selectedDetail.payment[item] / 1;
      }
      this.formData.payment = this.selectedDetail.payment;

      this.formData.payment_goods =
        this.selectedDetail.agent_collection.agent_collection / 1;
      this.formData.Service_Charge =
        this.selectedDetail.agent_collection.service_charge / 1;
      this.is_receipt_customer =
        this.selectedDetail.is_receipt_customer == 1 ? true : false;
      this.is_receipt_ds =
        this.selectedDetail.is_receipt_ds == 1 ? true : false;
      this.formData.Receipt = this.selectedDetail.receipt_count;
      this.formData.type_shipping = this.selectedDetail.transport_way;
      this.formData.transport_days = this.selectedDetail.aging;
      this.formData.remarks = this.selectedDetail.remark;
    },
  },
  mounted() {
    this.provincectiy();
    this.siteListFn();
  },
  methods: {
    changeSenderAddress(val) {
      this.formData.sender.province_name = "";
      this.formData.sender.city_name = "";
      this.formData.sender.district_name = "";
      this.formData.departure_station_name = this.addresssequence
        .find((item) => item.id === val[0])
        .next_level_data.find((item) => item.id === val[1]).name;
    },
    changeReceiverAddress(val) {
      this.formData.receiver.province_name = "";
      this.formData.receiver.city_name = "";
      this.formData.receiver.district_name = "";
      this.formData.at_station_name = this.addresssequence
        .find((item) => item.id === val[0])
        .next_level_data.find((item) => item.id === val[1]).name;
    },
    //获取分级组织
    siteListFn() {
      let data = {
        show_employee: false, // 是否展示员工信息
        not_show_first_branch: 1,
      };
      organizationBox(data).then((res) => {
        if (res.code === 10000) {
          this.waybillData = res.data;
        }
      });
    },
    //根据详细地址获取省市区 发货人信息
    detailSendAddress(address) {
      // if ((this.formData.sender_pcd || []).length !== 0) {
      //   return;
      // }
      let data = {
        detail_address: address,
      };
      recognitionListcity(data).then((res) => {
        if (
          res.data.province_name === "暂无省信息" ||
          res.data.city_name === "暂无市信息" ||
          res.data.area_name === "暂无区信息"
        ) {
          this.$message({
            message: "请选择发货方的省市区地址",
            type: "error",
          });
          this.formData.sender.province_name = "";
          this.formData.sender.city_name = "";
          this.formData.sender.district_name = "";
          this.formData.sender_pcd = [];
          return;
        }
        if (res.data.province_id && res.data.city_id && res.data.area_id) {
          this.formData.sender_pcd = [
            res.data.province_id,
            res.data.city_id,
            res.data.area_id,
          ];
          this.formData.sender.province_name = res.data.province_name;
          this.formData.sender.city_name = res.data.city_name;
          this.formData.sender.district_name = res.data.area_name;
          this.formData.departure_station_name = res.data.city_name;
        } else {
          this.$message({
            message: "请填写完整的收货地址",
            type: "error",
          });
          return;
        }
      });
    },
    //根据详细地址获取省市区 收货人信息
    DetailReceiverAddress(address) {
      // if ((this.formData.receiver_pcd || []).length !== 0) {
      //   return;
      // }
      let data = {
        detail_address: address,
      };
      recognitionListcity(data).then((res) => {
        if (
          res.data.province_name === "暂无省信息" ||
          res.data.city_name === "暂无市信息" ||
          res.data.area_name === "暂无区信息"
        ) {
          this.$message({
            message: "请选择收货方的省市区地址",
            type: "error",
          });
          this.formData.receiver.province_name = "";
          this.formData.receiver.city_name = "";
          this.formData.receiver.district_name = "";
          this.formData.receiver_pcd = [];
          return;
        }
        if (res.data.province_id && res.data.city_id && res.data.area_id) {
          this.formData.receiver_pcd = [
            res.data.province_id,
            res.data.city_id,
            res.data.area_id,
          ];
          this.formData.receiver.province_name = res.data.province_name;
          this.formData.receiver.city_name = res.data.city_name;
          this.formData.receiver.district_name = res.data.area_name;
          this.formData.at_station_name = res.data.city_name;
        } else {
          this.$message({
            message: "请填写完整的收货地址",
            type: "error",
          });
          return;
        }
      });
    },
    async openDrawerEvent() {
      this.getThermosphereType();
      this.getHandlersList();
      this.getWebsiteList();
    },
    // 地址库
    provincectiy() {
      regionList(0).then((res) => {
        this.addresssequence = res.data;
      });
    },

    async getThermosphereType() {
      let result1 = await dictionaryBatch({
        codes: [
          "thermosphere",
          "pay_way",
          "cost",
          "delivery_method",
          "transport_way",
          "Package_model",
        ],
      });
      let result2 = await getTransportsList({ is_all: false });
      //如果是客户就自动读取所属客户字段
      this.type_id = JSON.parse(localStorage.getItem("user")).type_id;
      this.type = JSON.parse(localStorage.getItem("user")).type;
      if (this.type === 1) {
        let result3 = await customerPeople({
          name: "",
          id: this.type_id + "",
          is_send: "1",
          is_receive: "",
        });
        if (result3.code === 10000) {
          this.customerList = result3.data;
          this.formData.customer_id = result3.data[0].id;
          this.formData.customer = result3.data[0].name;
        } else {
          this.$message({
            message: result3.message,
            type: "error",
          });
        }
      }
      this.transportsType = result2.data.data;
      this.payMethods = result1.data.list.pay_way;
      this.ThermosphereType = result1.data.list.thermosphere;
      this.costList = result1.data.list.cost.reverse().slice(0, 10);
      this.deliveryMethodsList = result1.data.list.delivery_method;
      this.transportsWayList = result1.data.list.transport_way;
      this.package_typeList = result1.data.list.Package_model;
    },
    async getHandlersList() {
      let result = await reqHandlersList({ branch_id: "1" });
      this.Handlers = result.data;
      this.formData.Handler = JSON.parse(localStorage.getItem("user")).user_id;
      let piece = this.Handlers.find(
        (item) => item.id == this.formData.Handler
      );
      if (piece) {
        this.formData.handler_name = piece.nickname;
      }
    },
    selectHandler(val) {
      let piece = this.Handlers.find((item) => item.id == val);
      if (piece) {
        this.formData.handler_name = piece.nickname;
      }
    },
    async getWebsiteList() {
      let result = await reqWebsiteList({ type: "3" });
      this.websiteList = result.data;
    },
    selectedWebsite(id) {
      if (id != "" || id != null || id != undefined) {
        let dataId = id[id.length - 1];
        //选择出发网点
        let piece = this.websiteList.find((item) => item.id == dataId);
        this.formData.departure = piece.name;
      }
    },
    selectedWebsite2(id) {
      if (id != "" || id != null || id != undefined) {
        let dataIdTwo = id[id.length - 1];
        //选择目的网点
        let piece = this.websiteList.find((item) => item.id == dataIdTwo);
        this.formData.destination_network = piece.name;
      }
    },
    searchRouterList(query) {
      //获取路由
      if (query !== "") {
        setTimeout(async () => {
          let { router, router_id } = this.formData;
          let result = await getRouterList({
            router_id,
            router,
          });
          this.routerList = result.data;
        }, 200);
      } else {
        this.routerList = [];
      }
    },
    selectedRouter(id) {
      //选择路由
      this.formData.router = this.routerList.find((item) => item.id == id).name;
    },
    searchCustomerList(query) {
      //获取客户
      if (query !== "") {
        setTimeout(async () => {
          // let { router, router_id } = this.formData;
          let result = await customerPeople({
            name: query, // 名称
            id: "",
            is_send: "1",
            is_receive: "",
          });
          this.customerList = result.data;
        }, 200);
      } else {
        this.customerList = [];
      }
    },
    selectedCustomer(id) {
      //选择客户
      this.formData.customer = this.customerList.find(
        (item) => item.id == id
      ).name;
    },
    searchShipperList(query) {
      this.formData.sender.name = query;
      //获取发货人
      if (query !== "") {
        setTimeout(async () => {
          let result = await getConsignorList({
            branch_id: 1,
            name: query,
            mobile: "",
          });
          this.shipperList = result.data;
        }, 200);
      } else {
        this.shipperList = [];
      }
    },
    searchConsigneeList(query) {
      this.formData.receiver.name = query;
      //获取收货人
      if (query !== "") {
        setTimeout(async () => {
          let result = await ConsigneeInterface({
            branch_id: 1,
            name: query,
            mobile: "",
            customer_id:
              this.formData.sender.company_id == ""
                ? 0
                : this.formData.sender.company_id * 1,
          });
          this.consigneeList = result.data;
        }, 200);
      } else {
        this.consigneeList = [];
      }
    },
    selectedConsignor(id) {
      //选择发货人
      if (id) {
        let piece = this.shipperList.find((item) => item.id == id);
        if (piece !== undefined) {
          this.formData.sender.name = piece.name;
          this.formData.sender.phone = piece.mobile;
          this.formData.sender.id = piece.id;
          this.formData.sender.company = piece.customer_name;
          this.formData.sender.company_id = piece.customer_id;
          this.formData.sender_pcd = [
            piece.province_id,
            piece.city_id,
            piece.district_id,
          ];
          this.formData.sender.address = piece.address;
          if (piece.province_id && piece.city_id) {
            this.formData.departure_station_name = this.addresssequence
              .find((item) => item.id === piece.province_id)
              .next_level_data.find((item) => item.id === piece.city_id).name;
          }
        } else {
          this.formData.sender.id = "";
          this.formData.sender.company_id = "";
        }
      }
    },
    selectedConsignee(id) {
      //选择收货人
      if (id) {
        let piece = this.consigneeList.find((item) => item.id == id);
        if (piece !== undefined) {
          this.formData.receiver.name = piece.name;
          this.formData.receiver.phone = piece.mobile;
          this.formData.receiver.id = piece.id;
          this.formData.receiver.company = piece.customer_name;
          this.formData.receiver.company_id = piece.customer_id;
          this.formData.receiver_pcd = [
            piece.province_id,
            piece.city_id,
            piece.district_id,
          ];
          this.formData.receiver.address = piece.address;
          if (piece.province_id && piece.city_id) {
            this.formData.at_station_name = this.addresssequence
              .find((item) => item.id === piece.province_id)
              .next_level_data.find((item) => item.id === piece.city_id).name;
          }
        } else {
          this.formData.receiver.id = "";
          this.formData.receiver.company_id = "";
        }
      }
    },

    saveSenderName(event) {
      var receiver_value = event.target.value;
      let receiver_name = this.shipperList.find(
        (item) => item.name == receiver_value
      );
      if (receiver_name == undefined) {
        this.formData.sender.company_id = "";
      } else {
        this.formData.sender.company_id = this.formData.sender.company_id;
      }
    },

    saveReceiverName(event) {
      var receiver_value = event.target.value;
      let receiver_name = this.consigneeList.find(
        (item) => item.name == receiver_value
      );
      if (receiver_name == undefined) {
        this.formData.receiver.company_id = "";
      } else {
        this.formData.receiver.company_id = this.formData.receiver.company_id;
      }
    },
    // 如果发现没有发货人清空id和发货公司id
    sender_customer_id() {
      var sender_name = this.formData.sender.name;
      let piece_value = this.shipperList.find(
        (item) => item.name == sender_name
      );
      if (piece_value == undefined) {
        this.formData.sender.customer_id = "";
        this.formData.sender.id = "";
      } else {
      }
    },
    // 如果发现没有收货人清空id和收货公司id
    receiver_customer_id() {
      var receiver_name = this.formData.receiver.name;
      let piece_value = this.consigneeList.find(
        (item) => item.name == receiver_name
      );
      if (piece_value == undefined) {
        this.formData.receiver.customer_id = "";
        this.formData.receiver.id = "";
      } else {
      }
    },
    selectTransportsType(val) {
      //选择承运产品类型之后
      this.formData.ThermosphereName = this.transportsType.find(
        (item) => item.id === val
      ).name;
      this.is_incubator = this.transportsType.find(
        (item) => item.id === val
      ).is_incubator;
      if (this.is_incubator === "0") {
        this.formData.Thermosphere = "8";
      } else {
        this.formData.Thermosphere = "";
      }
    },
    autoUpdateFee(val) {
      this.formData.payment = {};
      if (this.totalFreight) {
        this.formData.payment[val] = String(this.totalFreight);
      } else {
        //要是没填运费,那么传空
        this.formData.payment[val] = "0";
      }
    },
    async openFullScreen1() {
      let { formData, goodsArray } = this;
      if (formData.waybill_product_type == "") {
        this.$message({
          message: "承运类型不能为空",
          type: "error",
        });
      } else if (formData.customer_id == "") {
        this.$message({
          message: "所属客户不能为空",
          type: "error",
        });
      } else if (formData.Delivery_method == "") {
        this.$message({
          message: "送货方式不能为空",
          type: "error",
        });
      } else if (
        (this.is_incubator === "1" &&
          goodsArray.some((val) => val.thermosphere == "")) ||
        (this.is_incubator === "2" && formData.Thermosphere == "")
      ) {
        this.$message({
          message: "温层不能为空",
          type: "error",
        });
      } else if (
        formData.insure_value == "1" &&
        goodsArray.some((val) => val.name == "")
      ) {
        this.$message({
          message: "货物名称为空",
          type: "error",
        });
      } else if (formData.fkfshi == "") {
        this.$message({
          message: "付款方式不能为空",
          type: "error",
        });
      } else if (formData.Handler == "") {
        this.$message({
          message: "经办人不能为空",
          type: "error",
        });
      } else if (
        formData.sender.name == "" ||
        formData.sender.company == "" ||
        formData.sender.phone == "" ||
        formData.sender.address == "" ||
        formData.sender_pcd.length !== 3
      ) {
        this.$message({
          message: "缺少发货人必填项",
          type: "error",
        });
      } else if (
        formData.receiver.name == "" ||
        formData.receiver.company == "" ||
        formData.receiver.phone == "" ||
        formData.receiver.address == "" ||
        formData.receiver_pcd.length !== 3
      ) {
        this.$message({
          message: "缺少收货人必填项",
          type: "error",
        });
      } else {
        if (
          this.formData.sender.province_name === "暂无省信息" ||
          this.formData.sender.city_name === "暂无市信息" ||
          this.formData.sender.district_name === "暂无区信息"
        ) {
          this.$message({
            message: "请选择发货方的省市区地址",
            type: "error",
          });
          return;
        }
        if (
          this.formData.receiver.province_name === "暂无省信息" ||
          this.formData.receiver.city_name === "暂无市信息" ||
          this.formData.receiver.district_name === "暂无区信息"
        ) {
          this.$message({
            message: "请选择收货方的省市区地址",
            type: "error",
          });
          return;
        }
        this.fullscreenLoading = true;
        let id = this.selectedDetail.id;
        let waybill_number = formData.waybill_code;
        let from_region = formData.departure_station_name;
        let to_region = formData.at_station_name;
        let from_network_id = Array.isArray(formData.departure_id)
          ? String(formData.departure_id[formData.departure_id.length - 1])
          : String(formData.departure_id);
        let customer_id = String(formData.customer_id);
        let to_network_id = Array.isArray(formData.destination_network_id)
          ? String(
              formData.destination_network_id[
                formData.destination_network_id.length - 1
              ]
            )
          : String(formData.destination_network_id);
        let from_network = formData.departure;
        let to_network = formData.destination_network;
        let router_id = String(formData.router_id);
        let router = String(formData.router);
        let thermosphere = String(formData.Thermosphere);
        let delivery_method = formData.Delivery_method;
        let waybill_product_type = formData.waybill_product_type;
        let insure_value = formData.insure_value;
        let images = formData.images;
        let goods = goodsArray.map((item2) => {
          let item = { ...item2 };
          item.package_quantity = String(item.package_quantity);
          item.frozen_box_number = String(item.frozen_box_number);
          item.weight = String(item.weight);
          item.volume = String(item.volume);
          item.price = String(item.price);
          item.declared_value = String(item.declared_value);
          item.number = String(item.number);
          item.thermosphere = String(item.thermosphere);
          item.package_type = String(item.package_type);
          return item;
        });
        let agent_collection = {
          agent_collection: "",
          service_charge: "",
        };
        let handler_id = formData.Handler ? String(formData.Handler) : "";
        let handler_name = formData.handler_name
          ? String(formData.handler_name)
          : this.Handlers.find((item) => item.id == handler_id).name;
        let goods_action = "";
        let is_receipt_customer = this.is_receipt_customer == true ? "1" : "0";
        let is_receipt_ds = this.is_receipt_ds == true ? "1" : "0";
        let collect_time = {
          start_time: timestamp10(formData.pickerTime_val),
          end_time: "",
        };
        let transport_way = formData.type_shipping;
        let remark = formData.remarks;
        let aging = formData.transport_days;
        formData.sender.id =
          formData.sender.id == 0 ? "" : String(formData.sender.id);
        formData.sender.name = String(formData.sender.name);
        formData.sender.company_id = String(formData.sender.company_id);
        formData.sender.province_id = formData.sender_pcd[0]
          ? String(formData.sender_pcd[0])
          : "";
        formData.sender.city_id = formData.sender_pcd[1]
          ? String(formData.sender_pcd[1])
          : "";
        formData.sender.district_id = formData.sender_pcd[2]
          ? String(formData.sender_pcd[2])
          : "";
        formData.receiver.id =
          formData.receiver.id == 0 ? "" : String(formData.receiver.id);
        formData.receiver.name = String(formData.receiver.name);
        formData.receiver.company_id = String(formData.receiver.company_id);
        formData.receiver.province_id = formData.receiver_pcd[0]
          ? String(formData.receiver_pcd[0])
          : "";
        formData.receiver.city_id = formData.receiver_pcd[1]
          ? String(formData.receiver_pcd[1])
          : "";
        formData.receiver.district_id = formData.receiver_pcd[2]
          ? String(formData.receiver_pcd[2])
          : "";
        let expense = {};
        for (var item in formData.expense) {
          expense[item] = String(formData.expense[item]);
        }
        expense.total_freight = String(this.totalFreight);
        this.autoUpdateFee(formData.fkfshi);
        formData.payment.payment_method = formData.fkfshi;
        agent_collection.agent_collection = String(formData.payment_goods);
        agent_collection.service_charge = String(formData.Service_Charge);
        if (formData.konghuo === true) {
          if (formData.tihuo === true) {
            goods_action = "3";
          } else {
            goods_action = "1";
          }
        } else if (formData.tihuo === true) {
          goods_action = "2";
        }
        try {
          this.sender_customer_id();
          this.receiver_customer_id();
          let result = await WaybillEditFn({
            id,
            waybill_number,
            from_region,
            to_region,
            from_network,
            to_network,
            to_network_id,
            from_network_id,
            router_id,
            router,
            customer_id,
            thermosphere,
            delivery_method,
            waybill_product_type,
            insure_value,
            sender: formData.sender,
            receiver: formData.receiver,
            goods,
            expense,
            payment: formData.payment,
            agent_collection,
            handler_id,
            handler_name,
            goods_action,
            is_receipt_customer,
            is_receipt_ds,
            transport_way,
            remark,
            aging,
            images,
            collect_time,
          });
          if (result.code === 10000) {
            this.$message({
              type: "success",
              message: "编辑运单成功",
            });
            this.$emit("EditparentFlagShow", false);

            this.getWaybillListDataFn();
            this.fullscreenLoading = false;
            Object.assign(this.$data.formData, this.$options.data().formData);
            Object.assign(
              this.$data.goodsArray,
              this.$options.data().goodsArray
            );
          } else {
            this.$message({
              type: "error",
              message: result.message,
            });
            Object.assign(
              this.$data.goodsArray,
              this.$options.data().goodsArray
            );
            Object.assign(
              this.$data.formData.expense,
              this.$options.data().formData.expense
            );
            Object.assign(
              this.$data.formData.payment,
              this.$options.data().formData.payment
            );
            this.fullscreenLoading = false;
          }
        } catch (error) {
          this.fullscreenLoading = false;
        }
      }
    },
    handleClose() {
      this.goodsArray, this.$emit("EditparentFlagShow", false);
    },
    orderclose() {
      this.$emit("EditparentFlagShow", false);
    },

    //添加一行货物信息
    addShiper(scope) {
      this.goodsArray.push({
        name: "",
        packing: "", //包装
        package_quantity: "1", //包装数量
        goods_no: "", //编号
        number: "", //件数
        weight: "", //重量
        volume: "", //体积
        price: "", //价格
        declared_value: "", //价值
        thermosphere: "", //温层
        package_type: "", //保温箱型号
        frozen_box_number: "", //冻存盒数量
      });
    },
    reduce() {
      // 通过索引删除InForMationList数组中的元素
      // 因为如果不保留唯一一条数据的话再次渲染dom的时候是无法获取数据的
      if (this.goodsArray.length > 1) {
        this.goodsArray.splice(1, 1);
      } else {
        this.$message({
          message: "这是最后一条数据",
          type: "warning",
        });
      }
    },
    // 上传的功能
    beforeRemove(file, fileList) {
      return this.$confirm("是否删除该图片");
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      const index = this.formData.images.findIndex(
        (item) => item.uid === file.uid
      );
      index > -1 && this.formData.images.splice(index, 1);
    },
    handleChange(file, fileList, type) {
      this.fileList = fileList;
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((res) => {
        this.formData.images.push({
          type: "0",
          uid: file.uid,
          url: res.res.requestUrls[0],
        });
      });
    },
    //限制只能输入几位小数
    controlInputNumber(value, num, ...args) {
      // console.log(args[0],"kflajdfalksdjfalskdjf")
      if (num === 2) {
        switch (args.length) {
          case 1:
            this[args[0]] = filterTwoNumber(value);
            break;
          case 2:
            this[args[0]][args[1]] = filterTwoNumber(value);
            break;
          case 3:
            this[args[0]][args[1]][args[2]] = filterTwoNumber(value);
            break;
        }
      } else if (num === 3) {
        switch (args.length) {
          case 1:
            this[args[0]] = filterThreeNumber(value);
            break;
          case 2:
            this[args[0]][args[1]] = filterThreeNumber(value);
            break;
          case 3:
            this[args[0]][args[1]][args[2]] = filterThreeNumber(value);
            break;
        }
      }
    },
    // 监听承运类型计算匹配规则
    watchwaybill(newname, oldName) {
      this.pageaccountingrules(1, "val");
    },
    // 监听所属客户来计算匹配规则
    watchcustomer(newname, oldName) {
      this.pageaccountingrules(1, "val");
    },
    // 计费规则接口
    pageaccountingrules(type, val) {
      if (
        this.formData.waybill_product_type != "" &&
        this.formData.customer_id != ""
      ) {
        let goods_list_string = goodsArray.map((item2) => {
          let item = { ...item2 };
          item.package_quantity = String(item.package_quantity);
          item.frozen_box_number = String(item.frozen_box_number);
          item.weight = String(item.weight);
          item.volume = String(item.volume);
          item.price = String(item.price);
          item.declared_value = String(item.declared_value);
          item.number = String(item.number);
          item.thermosphere = String(item.thermosphere);
          item.package_type = String(item.package_type);
          return item;
        });
        // 计费规则调用
        var param = {
          node: "9", // 当前节点
          transport_type_id: this.formData.waybill_product_type + "", // 承运类型
          start_area_info: {
            address: this.formData.sender.address,
            province_id: this.formData.sender_pcd[0], // 省id
            city_id: this.formData.sender_pcd[1], // 市id
          }, // 出发区域信息
          end_area_info: {
            address: this.formData.receiver.address,
            province_id: this.formData.receiver_pcd[0], // 省id
            city_id: this.formData.receiver_pcd[1], // 市id
          }, // 到达区域信息
          customer_id: this.formData.customer_id + "", // 客户id
          carrier_id: "", // 承运商id
          goods_list: goods_list_string,
        };
        setTimeout(async () => {
          let result = await accountingrules(param);
          let datalist = JSON.parse(JSON.stringify(result.data));
          if (type == 1) {
            this.goodsArray = datalist;
            this.disposerule(datalist);
          } else if (type == 2) {
            if (datalist[val.$index].rule_cost_info.length == 1) {
              this.goodsArray.splice(val.$index, 1, datalist[val.$index]);
              this.$set(
                this.goodsArray[val.$index],
                "rule_cost_info_id",
                datalist[val.$index].rule_cost_info[0].rule_id
              );
              this.rulechange(
                val,
                datalist[val.$index].rule_cost_info,
                datalist[val.$index].rule_cost_info[0].rule_id
              );
            } else {
              this.goodsArray.splice(val.$index, 1, datalist[val.$index]);
            }
          }
        }, 200);
      }
    },
    disposerule(value) {
      for (let index = 0; index < value.length; index++) {
        if (value[index].rule_cost_info.length == 1) {
          this.$set(
            this.goodsArray[index],
            "rule_cost_info_id",
            value[index].rule_cost_info[0].rule_id
          );
        } else {
          this.$set(this.goodsArray[index], "rule_cost_info_id", "");
        }
      }
    },
    // 货物改变
    accopNumber(type, val) {
      this.pageaccountingrules(type, val);
    },
    rulechange(valrow, valuepice, value) {
      if (value != "") {
        var piceList = {};
        valuepice.forEach((element) => {
          if (element.rule_id == value) {
            piceList = element;
          }
        });
        this.goodsArray[valrow.$index].price = piceList.cost + "";
        this.AllShowprice();
      } else {
        this.goodsArray[valrow.$index].price = 0 + "";
        this.AllShowprice();
      }
    },
    // 最后的运费价格
    AllShowprice() {
      var allpice = 0;
      for (var i = 0; i < this.goodsArray.length; i++) {
        allpice = allpice + this.goodsArray[i].price * 1;
      }
      this.$set(this.formData.expense, 1, parseFloat(allpice).toFixed(2));
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-drawer__header {
  background: #eee !important;
  border-bottom: 1px solid #ccc !important;
  padding: 10px 20px 10px 20px !important;
}
/deep/ .select_right .el-select {
  float: right;
  width: 87px;
  padding-top: 8px;
}
/deep/ .el-drawer__header {
  margin-bottom: 12px !important;
}
/deep/ .four_w_select .el-select {
  width: 40% !important;
}
/deep/ .waybill_item_yuns .el-select {
  width: 130px !important;
}
// /deep/ .warbill_w .el-select {
//   width: 38% !important;
//   float: left !important;
// }
.classadd {
  font-size: 30px;
}
.waybill_content {
  width: 98%;
  font-size: 14px;
  margin: 0 auto;
  margin-bottom: 4%;
  .waybill_title {
    height: 40px;
    .waybill_left {
      float: left;
      width: 30%;
    }
    .waybill_time {
      float: right;
    }
  }
  .article {
    border: 1px solid #e69850;
    .waybill_top {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #e69850;
      .waybill_item {
        width: 342px;
        line-height: 54px;
        padding: 0px 0px 0px 24px;
        .order-number-input {
          margin-left: 5px;
          background-color: transparent !important;
          border-radius: 2px;
          border: none;
          border-bottom: 1px solid #d5d5d5;
          font-size: 13px;
          width: 200px;
          margin-top: 5px;
          height: 30px;
        }
      }
    }
    .waybill_mid {
      width: 100%;
      display: flex;
      .left_title_r {
        padding: 0px 0px 0px 30px;
      }
      .waybill_mid_left {
        width: 50%;
        display: flex;
        .left_title_l {
          width: 91px;
          background: #e69850;
          text-align: center;
          span {
            display: block;
            color: #fff;
          }
          .icon {
            padding-top: 61px;
            font-size: 34px;
          }
        }
        .left_title_shipper {
          line-height: 54px;
          // span {
          //   display: inline-block;
          //   width: 80px;
          // }
          .order-number-input {
            background-color: transparent !important;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #d5d5d5;
            font-size: 13px;
            width: 200px;
            margin-top: 5px;
            height: 30px;
          }
        }
      }
      .waybill_mid_right {
        width: 50%;
        display: flex;
        .right_title_r {
          padding: 0px 0px 0px 30px;
        }
        .right_title_l {
          width: 91px;
          background: #e69850;
          text-align: center;
          span {
            display: block;
            color: #fff;
          }
          .icon {
            padding-top: 61px;
            font-size: 34px;
          }
        }
        .left_title_shipper {
          line-height: 54px;
          // span {
          //   display: inline-block;
          //   width: 80px;
          // }
          .order-number-input {
            background-color: transparent !important;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #d5d5d5;
            font-size: 13px;
            width: 200px;
            margin-top: 5px;
            height: 30px;
          }
        }
      }
    }
    // 货物信息
    .order-information {
      margin-top: 5px;
      .order-shiper-img {
        width: 100%;
        line-height: 34px;
        border-bottom: 1px solid black;
        span {
          margin: 20px 10px;
        }
      }
      .total_left_title {
        width: 100%;
        height: 40px;
        background: #e69850;
        span {
          display: block;
          width: 100px;
          float: left;
          i {
            width: 4px;
            height: 28px;
            background: #fff;
            display: block;
            margin-left: 10px;
            margin-top: 5px;
            float: left;
            margin-right: 5px;
            border-radius: 1px 1px;
          }
          b {
            line-height: 40px;
            color: #fff;
            font-weight: 500;
          }
        }
        i {
          line-height: 40px;
          color: #fff;
        }
      }
      .order-shiper-warp {
        .goods-info-table {
          width: 100%;
          border: 1px solid black;
          height: 30px;
          text-align: center;
          border-collapse: collapse;

          tr {
            // border: 1px solid black;
            td {
              width: 30px;
              border: 1px solid black;
            }
          }
        }

        .remodername .number {
          height: 20px;
          display: block;
        }

        .remodername:hover .number {
          display: none;
        }

        .remodername .remodercenter {
          display: none;
          color: #ff0000;
        }

        .remodername:hover .remodercenter {
          height: 20px;
          display: block;
          color: #ff0000;
        }
      }
    }
    .waybill_bot {
      border: 1px solid #e69850;
      min-height: 42px;
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      overflow: hidden;
      .waybill_border {
        width: 100%;
        min-height: 42px;
        overflow: hidden;
        .waybill_item {
          float: left;
          // width: 15%;
          height: 42px;

          .select_right {
            width: 87px;
            float: left;
          }
          .order-number-name {
            line-height: 42px;
            // padding-left: 5px;
            float: left;
          }
          .order-number-input {
            width: 122px;
            border-bottom: 1px solid #d5d5d5;
            float: left;
            margin-top: 5px;
            height: 30px;
          }
          .order-number-input_moeny {
            width: px;
            border-bottom: 1px solid #d5d5d5;
            float: left;
            margin-top: 5px;
            height: 30px;
          }
        }
        .warbill_num {
          border-right: none;
        }
      }
    }
    .waybill_total {
      width: 100%;

      .total_left {
        width: 100%;
        border-right: 1px solid #e69850;
        .total_left_title {
          width: 100%;
          height: 40px;
          background: #e69850;
          span {
            display: block;
            width: 100px;
            float: left;
            i {
              width: 4px;
              height: 28px;
              background: #fff;
              display: block;
              margin-left: 10px;
              margin-top: 5px;
              float: left;
              margin-right: 5px;
              border-radius: 1px 1px;
            }
            b {
              line-height: 40px;
              color: #fff;
              font-weight: 500;
            }
          }
          i {
            line-height: 40px;
            color: #fff;
          }
        }
        .total_left_content_s {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          border-bottom: 1px solid #e69850;
          .total_left_content {
            padding: 0px 0px 0px 24px;
            width: 270px;
            line-height: 54px;
            display: flex;

            .order-number-name {
              // line-height: 42px;
              padding-left: 5px;
              float: left;
              text-align: right;
            }
            .order-number-input {
              width: 65px;
              border-bottom: 1px solid #d5d5d5;
              float: left;
              margin-top: 5px;
              height: 30px;
            }
            .order-number-input_moeny {
              width: 130px;
              border-bottom: 1px solid #d5d5d5;
              float: left;
              margin-top: 5px;
              height: 30px;
            }
          }
        }
      }
    }
    .payment_method_class {
      display: flex;
      border: 1px solid #e69850;
      border-left: none;
      border-right: none;
      // border-bottom: none;
      .total_mid {
        width: 100%;
        // background: red;
        .total_left_title {
          width: 100%;
          height: 40px;
          background: #e69850;
          span {
            display: block;
            width: 90px;
            float: left;
            i {
              width: 4px;
              height: 28px;
              background: #fff;
              display: block;
              margin-left: 10px;
              margin-top: 5px;
              float: left;
              margin-right: 5px;
              border-radius: 1px 1px;
            }
            b {
              line-height: 40px;
              color: #fff;
              font-weight: 500;
            }
          }
        }
        .total_left_content {
          display: flex;
          flex-wrap: wrap;
          // border-right: 1px solid #e69850;
          .four_w {
            min-width: 255px;
            line-height: 54px;
            padding: 0px 0px 0px 24px;
            .order-number-input {
              width: 65px;
              border-bottom: 1px solid #d5d5d5;
              margin-top: 5px;
              height: 30px;
            }
            .order-number-input_moeny {
              width: 130px;
              border-bottom: 1px solid #d5d5d5;
              margin-top: 5px;
              height: 30px;
            }
          }
        }
      }
      .total_right {
        width: 26%;
        .total_left_title {
          width: 100%;
          height: 40px;
          background: #e69850;
          span {
            display: block;
            width: 90px;
            float: left;
            i {
              width: 4px;
              height: 28px;
              background: #fff;
              display: block;
              margin-left: 10px;
              margin-top: 5px;
              float: left;
              margin-right: 5px;
              border-radius: 1px 1px;
            }
            b {
              line-height: 40px;
              color: #fff;
              font-weight: 500;
            }
          }
        }
        .total_right_content {
          width: 100%;
          border-left: 1px solid #e69850;
          .total_rigth_content_r {
            width: 227px;
            line-height: 57px;
            padding: 0px 0px 0px 24px;
            .order-number-name {
              text-align: right;
            }
            .order-number-input_moeny {
              border-bottom: 1px solid #d5d5d5;
              margin-top: 5px;
            }
          }
        }
      }
    }
    .waybill_message {
      width: 100%;
      display: flex;
      .waybill_item {
        width: 25.2%;
        border-right: 1px solid #e69850;
        line-height: 54px;
        padding: 0px 0px 0px 20px;
        display: flex;
        .order-number-name {
          font-size: 13px;
          // padding-left: 10px;
        }
        .order-number-input_d {
          margin-left: 5px;
          // background-color: transparent !important;
          border-radius: 2px;
          border: none;
          border-bottom: 1px solid #d5d5d5;
          font-size: 13px;
          width: 70px;
          float: left;
          margin-top: 5px;
          height: 30px;
        }
      }
      .warbill_f {
        .warbill_f_r {
          width: 90%;
          display: flex;
          .order-number-name {
            font-size: 13px;
            // padding-left: 10px;
          }
          .order-number-input_d {
            margin-left: 5px;
            background-color: transparent !important;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #d5d5d5;
            font-size: 13px;
            width: 70px;
            float: left;
            margin-top: 5px;
            height: 30px;
          }
        }
      }
    }
  }
}
.order-number-name {
  display: inline-block;
  width: 75px;
  text-align: right;
}
.footer {
  position: absolute;
  width: 100%;
  height: 50px;
  background: #f8f8f8;
  z-index: 100;
  bottom: 0px;
}
</style>